<template>
  <n-form
      ref="formRef"
      :inline="false"
      :rules="rules"
  >
    <n-grid :cols="24" :x-gap="xGap">
        <slot  />
    </n-grid>

  </n-form>

</template>
<script setup>
const formRef = ref()
const rules = ref({})

const props = defineProps({
  xGap:{
    type:Number,
    default: 24
  }
})
const loadRules = (item)=>{
  let itemRules = []
  if (rules.value[item.name]){
    itemRules = rules.value[item.name]
  }
  if (item?.required){
    itemRules.push({
      required:true,
      message:item.message || `${item.label}不能为空`
    })
  }
  if (item?.rules){
    itemRules = [...itemRules,...item.rules]
  }
  rules.value[item.name] = itemRules;
}
function validate(validateCallback,shouldRuleBeApplied){
  formRef.value?.validate(validateCallback,shouldRuleBeApplied)
}
defineExpose({
  loadRules,
  validate
})
</script>
